<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组合器</title>
        <style type="text/css">
            main { border: 1px solid blue; }
            /* 后代选择器(或称作子孙选择器) */
            main p { border: 1px solid green; }
            /* 亲子选择器 */
            main>p { background-color: #dfdfdf; }

            #first-paragraph {text-align: center; }

            /* 相邻的兄弟选择器 ( next-sibling combinator ) */
            #first-paragraph + * { border: 1px solid red; }
            /* 后面的兄弟选择器 ( subsequent-sibling combinator ) */
            #first-paragraph ~ * { margin: 10px; }
        </style>
    </head>
    <body>
        <h3>组合器</h3>

        <ul>
            <li>后代选择器</li>
            <li>亲子选择器</li>
            <li>相邻的兄弟选择器</li>
            <li>后面的兄弟选择器</li>
        </ul>

        <main>
            <div class="odd first">
                <section>黄沙百战穿金甲</section>
                <p>不破楼兰终不还</p>
            </div>
            <p class="even first" id="first-paragraph">喜羊羊美羊羊红太狼灰太狼</p>
            <div class="odd second">
                <section>甄深深</section>
                <p>天生我材必有用，千金散尽还复来</p>
            </div>
            <p class="even second">春眠不觉晓，处处蚊子咬</p>
        </main>

    </body>
</html>